<template style="background-color: #d2d2d2">
  <div class="content">
    <pet-card
        v-for="(pet,index) in petList"
        :key="index"
        :data="pet"
        class="item"
    >
    </pet-card>
  </div>

  <el-affix position="bottom" :offset="20">
    <el-button @click="goToAddPetPage" type="primary">添加宠物</el-button>
  </el-affix>
</template>

<script>
import PetCard from "@/components/SimpleUser/Pet/PetCard.vue";
import axios from "axios";
export default {
  name: "PetPage",
  components: {PetCard},
  mounted() {
    this.getPetList();
  },
  data(){
    return{
      petList:[],
    }
  },
  methods:{
    getPetList(){
      axios.get("http://localhost:8088/get/pet",{withCredentials:true})
          .then(response => {
            this.petList = response.data.data
          })
      },
    goToAddPetPage(){
      this.$router.push('/petAdd');
    }
    },
}
</script>

<style>
.content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;/* 替代space-between布局方式 */
}

.item {
  flex: 1;
  height: 200px;
  background-color: #ffffff;

  /* 间隙为5px */
  margin: 0 5px 5px 0;
  /* END */

  /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
  width: calc((100% - 20px) / 3);
  /* END */

  /* 加入这两个后每个item的宽度就生效了 */
  min-width: calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  /* END */
}

.item:nth-child(3n) {
  /* 去除第3n个的margin-right */
  margin-right: 0;
}
</style>
